<!DOCTYPE html>
<html>

<head>
    
    <script src="intelxdk.js"></script>
    <script src="cordova.js"></script>
    <script src="xhr.js"></script>
    
    <script src="js/app.js"></script>
    <script src="js/init-app.js"></script>
    <script src="js/init-dev.js"></script>


    <script type="application/javascript" src="app_framework/2.1/appframework.js"></script>
    <script type="application/javascript" src="app_framework/2.1/appframework.ui.js" data-ver="1"></script>
    
    <script type="application/javascript" src="js/jquery.min.js"></script>
    <script type="application/javascript" src="js/jquery.cookie.js"></script>
    
    <script type="application/javascript" src="sidebar/js/jquery.event.move.js"></script>
    <script type="application/javascript" src="sidebar/js/jquery.event.swipe.js"></script>
    <!-- <script type="application/javascript" src="sidebar/js/sidebar.js"></script>
    <script type="application/javascript" src="sidebar/js/swipe.js"></script>
    <script type="application/javascript" src="js/index_user_scripts.js"></script>
    <script type="application/javascript" src="js/af_subpage.js"></script> -->
    
    <script type="application/javascript" src="js/jquery.cookie.js"></script>
    <script type="application/javascript" src="js/menu.js"></script>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>

<style type="text/css">           
    
img{
    height:100%;
    width:100%;
}
    
@media screen and (orientation:portrait) and (max-height: 1000px){ 
    #play{
        top:3%;
    }
    #store{
        top:16%;
    }
    #social{
        top:30%;
    }
    #rules{
        top:43.5%;
    }
    #options{
        top:57.5%;
    }
    #highscore{
        top:72.5%;
    }

    #wrapper{
        position:fixed;
        max-height:100vh;
        max-width:100vw;
        left:10%;
        margin-top:5%;
    }

    #left{
        position:relative;
        float:left;
        top:3%;
        max-height:100vw;
        max-width:50%;
        min-width:50%;
    }

    #right{
        position:relative;	
        float:left; 
        left: -12%;
        margin-top:22%;
        max-height:100vw;
        max-width:50%;
        min-width:50%;
    }
}
    
@media screen and (orientation:landscape) and (max-width: 1000px){    
    
    #play{
        top:1%;
    }
    #social{
        position:relative;
        left:78%;
        top:-78px;
    }
    #options{
        position:relative;
        top:-155px;
    }
    
    #store{
        top:1%;
    }
    #rules{
        position: relative;
        left:78%;
        top:-78px;
    }
    #highscore{ 
        position: relative;
        top:-155px;
    }
    
    #wrapper{
        max-height:100vw;
        max-width:100vh;
        margin-top:-5%;
    }

    #left{
        position:relative;
        float:left;
        max-height:100vh;
        max-width:50vh;
        min-width:45vh;
    }
    #right{
        position:relative;	
        float:left; 
        left: 28%;
        max-height:100vh;
        max-width:50vh;
        min-width:45vh;
    }
}

@media screen and (orientation:portrait) and (min-height: 1000px){ 
    img{
        width: 300px;
        height: 300px;
    }

    #wrapper{
        position:fixed;
        max-height:100vh;
        max-width:100vw;
        left:10%;
        margin-top:5%;
    }

    #left{
        position:fixed;
        top:6%;
        left:10%;
        max-height:100vw;
        max-width:50%;
        min-width:50%;
    }

    #right{
        position:fixed;	
        left: 39%;
        margin-top:13%;
        max-height:100vw;
        max-width:50%;
        min-width:50%;
    }
    
    #play{
        position:absolute;
        top:0px;
    }
    #social{
        position:absolute;
        top:310px;
    }
    #options{
        position:absolute;
        top:620px;
    }
    
    #store{
        position:absolute;
        top:0px;
    }
    #rules{
        position:absolute;
        top:310px;
    }
    #highscore{
        position:absolute;
        top:620px;
    }
}
    
@media screen and (orientation:landscape) and (min-width: 1000px){ 
    img{
        width: 350px;
        height: 350px;
    }
    #wrapper{
        max-height:100%;
        max-width:100%;
        margin-top:0%;
    }
    #left{
        position:fixed;
        max-height:100%;
        left:2%;
        max-width:45%;
        min-width:45%;
    }
    #right{
        position:fixed;	
        left: 51%;
        max-height:100%;
        max-width:45%;
        min-width:45%;
    }
    #play{
        position:absolute;
        top:1%;
        left:50px;
    }
    #social{
        position:absolute;
        left:55%;
        top:176px;
    }
    #options{
        position:absolute;
        top:355px;
        left:50px;
    }
    
    #store{
        position:absolute;
        top:1%;
        left:-50px;
    }
    #rules{
        position: absolute;
        left:38%;
        top:176px;
    }
    #highscore{ 
        position: absolute;
        top:355px;
        left:-50px;
    }
}

</style>
    
</head>    
    
<body> 
    <!--<button onclick="window.location.href='test.html'" style='width:100px; height: 50px;'>Write</button>
    <button onclick="window.location.href='readfile.html'" style='width:100px; height: 50px;'>Read</button>-->
<div id='wrapper'>
	<div id='left'>
		<div id='play'><img alt='play' src='img/play.png' onclick="window.location='game.html'"></div>
		<div id='social'><img alt='social' src='img/social.png' onclick="window.location='account.html'"></div>
		<div id='options'><img alt='options' src='img/options.png' onclick="window.location='development.html'"></div>
	</div>
	<div id='right'>
		<div id='store'><img alt='store' src='img/store.png' onclick="window.location='development.html'"></div>
		<div id='rules'><img alt='rules' src='img/rules.png' onclick="window.location='rules.html'"></div>
		<div id='highscore'><img alt='highscore' src='img/highscore.png' onclick="window.location='development.html'"></div>
	</div>
    
</div>
    
    
<script>
    $(document).ready(function(){
        var c = getUserId();
        if(c == undefined)
        {
            window.location.href='index.html';
        }
    });
    
    $( window ).unload(function(){
        
        document.removeEventListener("backbutton", backKeyDown, false);
        
    });
    
    document.addEventListener("intel.xdk.device.ready",onDeviceReadyHideStatus,false);
    document.addEventListener("backbutton",backKeyDown, false);
    
    function onDeviceReadyHideStatus(evt)
    {
    intel.xdk.device.hideStatusBar();
    }; 
    
    function backKeyDown()
    {
        var exit = confirm('Do you want to exit?');
        if(exit){
            //alert('close app');
            navigator.app.exitApp();
        }
    }
    
</script>
</body>
</html>